﻿<Page x:Class="NewMarkersSample.Pages.ColumnChartSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	  xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
    Title="Column chart" Loaded="Page_Loaded">
	<Grid>
		<Grid.Resources>
			<d3:BrushHSBConverter SaturationDelta="0.8" LightnessDelta="1.6" x:Key="lighterConverter"/>
			<d3:BackgroundToForegroundConverter x:Key="backToForeConv"/>
		</Grid.Resources>

		<Grid.ColumnDefinitions>
			<ColumnDefinition/>
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>

		<d3:ChartPlotter Name="plotter" Visible="0,0,100,1">
			<d3:ColumnChart Name="chart" ItemsSource="{Binding}">
				<d3:TemplateMarkerGenerator>
					<DataTemplate>
						<Rectangle Fill="{d3:SelfBinding (d3:PointChartBase.Index), Converter={StaticResource fillsConverter}}"
								   d3:ViewportPanel.ViewportWidth="1">
							<d3:LiveToolTipService.ToolTip>
								<d3:LiveToolTip Background="{d3:SelfBinding Path=Owner.Fill, Converter={StaticResource lighterConverter}}"
												TextBlock.Foreground="{d3:SelfBinding Path=Owner.Fill, Converter={StaticResource backToForeConv}}">
									<TextBlock>
										<Run Text="X="/><TextBlock Text="{Binding Path=Owner.(d3:PointChartBase.Index), RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type d3:LiveToolTip}}}"/>
										<Run Text="; Y="/><TextBlock Text="{Binding}"/>										
									</TextBlock>
								</d3:LiveToolTip>
							</d3:LiveToolTipService.ToolTip>
						</Rectangle>
					</DataTemplate>
				</d3:TemplateMarkerGenerator>
			</d3:ColumnChart>

			<RepeatButton Name="addBtn" Content="Add value" Click="addBtn_Click" Canvas.Bottom="10" Canvas.Right="10"/>
			<RepeatButton Name="insertBtn" Content="Insert value" Click="insertBtn_Click" Canvas.Bottom="35" Canvas.Right="10"/>
			<RepeatButton Name="deleteBtn" Content="Delete first" Click="deleteBtn_Click" Canvas.Bottom="60" Canvas.Right="10"/>
		</d3:ChartPlotter>

		<d3:ChartPlotter Name="plotter2" Visible="0,0,1,100" Grid.Column="1">
			<d3:HorizontalColumnChart Name="chart2" ItemsSource="{Binding}">
				<d3:TemplateMarkerGenerator>
					<DataTemplate>
						<Rectangle Fill="DarkOrchid">
							<Rectangle.ToolTip>
								<TextBlock>
									<Run Text="X="/>
									<TextBlock>
									<TextBlock.Text>
										<Binding Path="(d3:PointChartBase.Index)" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorLevel=3, AncestorType={x:Type Rectangle}}"/>
									</TextBlock.Text>	
									</TextBlock><Run Text="; Y="/><TextBlock Text="{Binding}"/>
								</TextBlock>
							</Rectangle.ToolTip>
						</Rectangle>
					</DataTemplate>
				</d3:TemplateMarkerGenerator>
			</d3:HorizontalColumnChart>
		</d3:ChartPlotter>
	</Grid>
</Page>
